<template>
  <div class="dialog">
    <div class="mask">
      <div class="con">
        <p><i></i><b @click="cancel">x</b></p>
        <div class="cen">
          <li>
            <span>楼盘名称：</span><input type="text" v-model="form.title" />
          </li>
          <li>
            <span>所属区域：</span><input type="text" v-model="form.area" />
          </li>
          <li><span>价格：</span><input type="text" v-model="form.price" /></li>
          <li>
            <span>更新时间：</span><input type="text" v-model="form.time" />
          </li>
          <li><span>排序：</span><input type="text" v-model="form.sorts" /></li>
          <li>
            <el-button type="primary" size="middle" @click="cancel"
              >取消</el-button
            >
            <el-button type="primary" size="middle" @click="Success"
              >确定</el-button
            >
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialog_visible: Boolean,
  },
  data() {
    return {
      visible: this.dialog_visible,
      form: {
        title: "",
        area: "",
        price: "",
        time: "",
        sorts: "",
      }
    }
  },
  watch: {
    visible(val) {
      this.dialog_visible = val;
    }
  },
  methods: {
    Success() { /// 添加成功
      this.$api.addList(this.form).then((res) => {
        console.log(res, "page")
        this.$api.getList().then((res) => {
          this.list = res.data.data
        })
        this.$message.success(res.data.message)
        this.$emit("clickFn", false)
        this.form = "";
      })
    },
    cancel() {
      this.$emit("clickFn", false)
    }
  }
};
</script>

<style lang='scss' scoped>
.dialog {
  width: 100%;
  height: 100%;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    z-index: 11111;
    top: 0;
    left: 0;
  }
}
.con {
  width: 550px;
  height: 320px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  p{
    width: 100%;
    display: flex;
    height: 35px;
    line-height: 35px;
    justify-content: space-between;
    padding: 0 10px;
  }
  .cen {
    width: 85%;
    height: 45px;
    margin: 0 auto;
  }
  li {
    display: flex;
    margin: 10px 0;
    span {
      width: 100px;
      text-align: center;
      display: inline-block;
    }
    input {
      flex: 1;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
    }
  }
}
</style>